<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    说明：计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数
    <p>{{sum}}</p>
    <p>{{dtfrom}}</p>
</div>
<script>
    var mixin = {
        data:{
        books:[{bookname:"哈利波特",price:15},{bookname:"简",price:33}],
        sum:"123来自混合对象",
        dtfrom:"我是来自混合对象"
    },
        created: function () {
            console.log('混合对象的钩子被调用')
        }
    }
    new Vue({
        el: '#app',
        data:{
            books:[{bookname:"哈利波特",price:15},{bookname:"简",price:33}],

            dtfrom:"我是自己定义的内容"
        },
        mixins: [mixin],
        created: function () {
            console.log('组件钩子被调用')
        }
    })
</script>
</body>
</html>
